<template>
    <div>
      <div style="float: left">
        <i class="el-icon-s-fold ico" @click="iconFold" v-show="isCollapse"></i>
        <i class="el-icon-s-unfold ico" @click="iconUnFold" v-show="!isCollapse"></i>
      </div>

      <!--<el-breadcrumb separator="/" style="display: inline-block;margin-left: 10px">-->
        <!--<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
        <!--<el-breadcrumb-item :to="{ path: item.path }" v-for="(item) in levelList" :key="item.path" v-if="item.meta.title">-->
          <!--{{item.meta.title}}-->
        <!--</el-breadcrumb-item>-->
      <!--</el-breadcrumb>-->

      <el-tabs v-model="editableTabsValue" type="card" :closable="closable" @tab-click="handletab" @tab-remove="removeTab" style="float: left;margin-left: 20px">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <!--<router-link :to=""></router-link>-->
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
  import bus from '../../assets/js/busEvevt'
    export default {
      data() {
        return {
          closable:true,
          isCollapse:true,
          levelList:'',
          editableTabsValue: '/homePage',
          tabIndex: '/homePage',
          editableTabs: [],
        }
      },
      methods: {
        iconFold:function () {
          this.isCollapse = false;
        },
        iconUnFold:function () {
          this.isCollapse = true;
        },
        getBreadcrumb() {
          let matched = this.$route.matched.filter(item => item.meta.title);
          this.levelList = matched;
          this.addTab()
        },
        handletab(row) {
          this.tabIndex = row.name;
          this.$router.push({path: row.name})
        },
        addTab() {
          let newTabTitle = this.levelList[0].meta.title;
          let newTabName = this.levelList[0].path;
          let bol = this.editableTabs.some(val => val.title == newTabTitle);
          if(bol){

          }else {
            this.editableTabs.push({
              title: newTabTitle,
              name: newTabName,
            });
          }
          this.editableTabsValue = newTabName;
        },
        removeTab(targetName) {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
          }
          this.editableTabsValue = activeName;
          this.$router.push({path: activeName});
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
          if(this.editableTabs.length == 0){
            this.$router.push({path: '/homePage'});
          }

        },
      },
      watch:{
        isCollapse(val){
          bus.$emit('isCollapse',!val);
        },
        $route(to, from) {
          this.getBreadcrumb()
        },
      },
      mounted(){
        this.getBreadcrumb();
      },
    }
</script>

<style scoped>
  .ico{
    font-size: 20px;
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
  }
</style>
